// import { observeFundElements } from "@/content-scripts/watch/person/person";
import {
  createTopAvatar,
  createTopInfo,
} from "@/content-scripts/components/person/person";
import {
  settingName,
  settingAvatar,
} from "@/content-scripts/components/person/setting/setting";
import {
  fundsName,
  fundsAvatar,
  fundAssets,
  fundValuation,
} from "@/content-scripts/components/person/funds/funds";
export function createUserElement() {
  observePersonAvatar()
  if (window.location.href === "https://www.gate.com/zh/myaccount/myfunds") {
    fundsName();
    fundsAvatar();
    fundAssets();
    fundValuation();
  }
  if (window.location.href == 'https://www.gate.com/zh/myaccount/profile/settings' || window.location.href == 'https://www.gate.com/myaccount/profile/settings') {
    settingName();
    settingAvatar();
  }
  //   fundsName();
  //   fundsAvatar();
  //   fundAssets();
  //   fundValuation();
  //   observeFundElements()
}

let avatatObserve = null
// 监听头像元素长度
function observePersonAvatar() {
  if (avatatObserve) avatatObserve.disconnect();

  let previousValues = {
    elementLength: null,
    style: null
  };
  avatatObserve = new MutationObserver(() => {
    const avatarItemOne = document.querySelectorAll('.fbxVZq')
    const avatarItemTwo = document.querySelectorAll('.nav-container-user-left')
    const avatarItemThree = document.querySelectorAll('.my-avatar')

    const avatarItem = [...avatarItemOne, ...avatarItemTwo, ...avatarItemThree]

    // const containerProfile = document.querySelector('#drawer_container_profile')

    const hasChanged =
      avatarItem.length !== previousValues.elementLength

    if (avatarItem && hasChanged) {
      previousValues = {
        elementLength: avatarItem.length,
      }
      createTopAvatar();
      createTopInfo();
      if (window.location.href == 'https://www.gate.com/zh/myaccount/profile/settings' || window.location.href == 'https://www.gate.com/myaccount/profile/settings') {
        settingName();
        settingAvatar();
      }
    }

  });
  avatatObserve.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    characterData: true,
  });
}
